<template>
	<view class="content">
		<view v-if='contents && contents.length > 0'>
			<view class="forum-page">
				<scroll-view scroll-y class="scroll-view" @scrolltolower="loadMore"
					:style="{height: scrollHeight + 'px'}">
	
					<view v-for="(item, index) in contents" :key="index" class="forum-item">
						<swiper class="swiper-box" indicator-dots autoplay circular indicator-active-color="#fff" @click='clickContent(item)'>
							<swiper-item v-for="(img, i) in item.images" :key="i">
								<image :src="img" mode="aspectFill" class="swiper-img"></image>
							</swiper-item>
						</swiper>
	
						<view class="title-overlay">
							<text class="title">{{ item.title }}</text>
						</view>
					</view>
	
					<u-loadmore :status="loadStatus" />
				</scroll-view>
			</view>
		</view>
		<view v-else style='margin-top:20vh'>
			<u-empty mode="list">
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categoryId: 0,
				contents: [],
				limit: 5,
				page: 1,
				status: 'loadmore',
				scrollHeight: 0
			}
		},
		onLoad(options) {
			this.getList()
		},
		mounted() {
			this.getWindowHeight()
		},
		onReachBottom() {
			if (this.status == 'loadmore') {
				this.page++
				this.getContents()
			}
		},
		methods: {
			getWindowHeight() {
				uni.getSystemInfo({
					success: (res) => {
						this.scrollHeight = res.windowHeight
						console.log(res.windowHeight)
					}
				})
			},
			async getList() {
				this.loadStatus = 'loading'
			
				this.request.get(`api/contents`, {
					'@filter': `entity.getCategory().getType().getSlug() == 'content' && entity.getEnabled() == true`,
					'@order': `entity.listOrder|ASC`,
					limit: this.limit,
					page: this.page
				}).then((res) => {
					if (res.data && res.data.length < this.limit) {
						this.status = 'nomore'
					}
					for (let i of res.data) {
						if (i.cover) {
							if (i.images) {
								i.images.push(i.cover)
							} else {
								i.images = [i.cover]
							}
						}
						this.contents.push(i)
					}
					uni.hideLoading()
				})
			},
			loadMore() {
				if (this.loadStatus !== 'nomore') {
					this.page++
					this.getList()
				}
			},
			clickContent(content){
				console.log(content)
				uni.navigateTo({
					url: `/pages/content/detail?id=${content.id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.forum-container {
		padding: 20rpx;
	}

	.scroll-view {
		height: 100vh;
	}

	.forum-item {
		margin-bottom: 30rpx;
		position: relative;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.swiper-box {
		height: 400rpx;
	}

	.swiper-img {
		width: 100%;
		height: 100%;
	}

	
	.title-overlay {
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  padding: 24rpx;
	  background: linear-gradient(
	    to top, 
	    rgba(0,0,0,0.7) 0%, 
	    rgba(0,0,0,0.5) 50%, 
	    transparent 100%
	  );
	  
	  .title {
	    color: #fff;
	    font-size: 34rpx;
	    background-color: rgba(0,0,0,0.3);
	    padding: 8rpx 16rpx;
	    border-radius: 8rpx;
	    display: inline-block;
	  }
	}

</style>